<nav id="sidebar" class="sidebar perfect-scrollbar-transparent" [class.sidebar-bg]="hasBackgroundImage()" [style]="style">
  <div class="sidebar-content">
    <div class="transparent perfect-scrollbar">
      <div class="sidebar-header">
        <a href="#">Keira3 Database Editor</a>
      </div>

      <div class="sidebar-profile">
        <div class="user-pic">
          <img class="img-responsive img-rounded" src="assets/img/ac.png" alt="User picture" />
        </div>
        @if (mysqlService.config) {
          <div class="user-info">
            <span class="db-user">
              <strong>{{ mysqlService.config.user }}</strong>
            </span>
            <span class="db-host">
              <strong
                >{{ mysqlService.config.host }}<span class="port">:{{ mysqlService.config.port }}</span></strong
              >
            </span>
            <span class="db-name">
              <strong
                ><i>{{ mysqlService.config.database }}</i></strong
              >
            </span>
            <span class="user-status">
              <i class="fa fa-circle connection-status" [class.connected]="mysqlService.getConnectionState() === 'CONNECTED'"></i>
              <span>{{ mysqlService.getConnectionState() | translate | titlecase }}</span>
            </span>
            <span>
              <keira-switch-language />
            </span>
            <span>
              <keira-logout-btn />
            </span>
          </div>
        }
      </div>

      <div class="sidebar-menu">
        <ul>
          <li>
            <a id="dashboard-toggle" href="#" [routerLink]="''">
              <i class="fa fa-tachometer-alt"></i> {{ 'SIDEBAR.DASHBOARD' | translate }}
            </a>
          </li>

          <li>
            <a id="sql-editor-toggle" href="#" [routerLink]="'sql-editor'">
              <i class="fa fa-code"></i> {{ 'SIDEBAR.SQL_EDITOR' | translate }}
            </a>
          </li>

          <li>
            <a id="collapse-all" (click)="collapseAll()">
              <i class="fas fa-angle-double-up"></i> {{ 'SIDEBAR.COLLAPSE_ALL' | translate }}
            </a>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['creature'] === 'down'">
            <a id="creature-editor-toggle" (click)="toggleState('creature')">
              <i class="fa fa-dragon"></i>
              <span [translate]="'SIDEBAR.CREATURE.TITLE'"></span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates['creature']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'creature/select'">
                    {{ 'SIDEBAR.CREATURE.SELECT_CREATURE' | translate }}
                  </a>
                </li>
                @if (creatureHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-template'">
                      {{ 'SIDEBAR.CREATURE.CREATURE_TEMPLATE' | translate }}
                      @if (creatureHandlerService.isCreatureTemplateUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                  @if (!creatureHandlerService.isNew) {
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-template-addon'">
                        {{ 'SIDEBAR.CREATURE.TEMPLATE_ADDON' | translate }}
                        @if (creatureHandlerService.isCreatureTemplateAddonUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-template-model'">
                        {{ 'SIDEBAR.CREATURE.TEMPLATE_MODEL' | translate }}
                        @if (creatureHandlerService.isCreatureTemplateModelUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-template-resistance'">
                        {{ 'SIDEBAR.CREATURE.TEMPLATE_RESISTANCE' | translate }}
                        @if (creatureHandlerService.isCreatureTemplateResistanceUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-template-spell'">
                        {{ 'SIDEBAR.CREATURE.TEMPLATE_SPELL' | translate }}
                        @if (creatureHandlerService.isCreatureTemplateSpellUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-template-movement'">
                        {{ 'SIDEBAR.CREATURE.TEMPLATE_MOVEMENT' | translate }}
                        @if (creatureHandlerService.isCreatureTemplateMovementUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-onkill-reputation'">
                        {{ 'SIDEBAR.CREATURE.ONKILL_REPUTATION' | translate }}
                        @if (creatureHandlerService.isCreatureOnkillReputationUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-equip-template'">
                        {{ 'SIDEBAR.CREATURE.EQUIP_TEMPLATE' | translate }}
                        @if (creatureHandlerService.isCreatureEquipTemplateUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/npc-vendor'">
                        {{ 'SIDEBAR.CREATURE.VENDOR' | translate }}
                        @if (creatureHandlerService.isNpcVendorUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/npc-trainer'">
                        {{ 'SIDEBAR.CREATURE.TRAINER' | translate }}
                        @if (creatureHandlerService.isNpcTrainerUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-questitem'">
                        {{ 'SIDEBAR.CREATURE.QUEST_ITEM' | translate }}
                        @if (creatureHandlerService.isCreatureQuestitemUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-loot-template'">
                        {{ 'SIDEBAR.CREATURE.CREATURE_LOOT' | translate }}
                        @if (creatureHandlerService.isCreatureLootTemplateUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/pickpocketing-loot-template'">
                        {{ 'SIDEBAR.CREATURE.PICKPOCKETING_LOOT' | translate }}
                        @if (creatureHandlerService.isPickpocketingLootTemplateUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/skinning-loot-template'">
                        {{ 'SIDEBAR.CREATURE.SKINNING_LOOT' | translate }}
                        @if (creatureHandlerService.isSkinningLootTemplateUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-spawn'">
                        {{ 'SIDEBAR.CREATURE.SPAWN' | translate }}
                        @if (creatureHandlerService.isCreatureSpawnUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-spawn-addon'">
                        {{ 'SIDEBAR.CREATURE.SPAWN_ADDON' | translate }}
                        @if (creatureHandlerService.isCreatureSpawnAddonUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/sai-creature'">
                        {{ 'SIDEBAR.CREATURE.SMARTAI' | translate }}
                        @if (creatureHandlerService.isCreatureSaiUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-text'">
                        {{ 'SIDEBAR.CREATURE.TEXT' | translate }}
                        @if (creatureHandlerService.isCreatureTextUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-formations'">
                        {{ 'SIDEBAR.CREATURE.FORMATIONS' | translate }}
                        @if (creatureHandlerService.isCreatureFormationUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                  }
                }
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['quest'] === 'down'">
            <a (click)="toggleState('quest')">
              <i class="fa fa-scroll"></i>
              <span [translate]="'SIDEBAR.QUEST.TITLE'"></span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates['quest']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'quest/select'"> {{ 'SIDEBAR.QUEST.SELECT_QUEST' | translate }} </a>
                </li>
                @if (questHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'quest/quest-template'">
                      {{ 'SIDEBAR.QUEST.QUEST_TEMPLATE' | translate }}
                      @if (questHandlerService.isQuestTemplateUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                  @if (!questHandlerService.isNew) {
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/quest-template-addon'">
                        {{ 'SIDEBAR.QUEST.QUEST_TEMPLATE_ADDON' | translate }}
                        @if (questHandlerService.isQuestTemplateAddonUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/quest-template-locale'">
                        {{ 'SIDEBAR.QUEST.QUEST_TEMPLATE_LOCALE' | translate }}
                        @if (questHandlerService.isQuestTemplateLocaleUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/quest-offer-reward'">
                        {{ 'SIDEBAR.QUEST.QUEST_OFFER_REWARD' | translate }}
                        @if (questHandlerService.isQuestOfferRewardUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/quest-request-items'">
                        {{ 'SIDEBAR.QUEST.QUEST_REQUEST_ITEMS' | translate }}
                        @if (questHandlerService.isQuestRequestItemsUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/creature-queststarter'">
                        {{ 'SIDEBAR.QUEST.CREATURE_QUESTSTARTER' | translate }}
                        @if (questHandlerService.isCreatureQueststarterUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/creature-questender'">
                        {{ 'SIDEBAR.QUEST.CREATURE_QUESTENDER' | translate }}
                        @if (questHandlerService.isCreatureQuestenderUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/gameobject-queststarter'">
                        {{ 'SIDEBAR.QUEST.GAMEOBJECT_QUESTSTARTER' | translate }}
                        @if (questHandlerService.isGameobjectQueststarterUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/gameobject-questender'">
                        {{ 'SIDEBAR.QUEST.GAMEOBJECT_QUESTENDER' | translate }}
                        @if (questHandlerService.isGameobjectQuestenderUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                  }
                }
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['gameobject'] === 'down'">
            <a (click)="toggleState('gameobject')">
              <i class="fa fa-dungeon"></i>
              <span [translate]="'SIDEBAR.GAME_OBJECT.TITLE'"></span>
            </a>
            <div class="sidebar-submenu" [@slide]="menuStates['gameobject']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'gameobject/select'">
                    {{ 'SIDEBAR.GAME_OBJECT.SELECT_GAMEOBJECT' | translate }}
                  </a>
                </li>
                @if (gameobjectHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-template'">
                      {{ 'SIDEBAR.GAME_OBJECT.GAMEOBJECT_TEMPLATE' | translate }}
                      @if (gameobjectHandlerService.isGameobjectTemplateUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                  @if (!gameobjectHandlerService.isNew) {
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-template-addon'">
                        {{ 'SIDEBAR.GAME_OBJECT.TEMPLATE_ADDON' | translate }}
                        @if (gameobjectHandlerService.isGameobjectTemplateAddonUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-questitem'">
                        {{ 'SIDEBAR.GAME_OBJECT.QUEST_ITEMS' | translate }}
                        @if (gameobjectHandlerService.isGameobjectQuestitemUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-loot-template'">
                        {{ 'SIDEBAR.GAME_OBJECT.GAMEOBJECT_LOOT' | translate }}
                        @if (gameobjectHandlerService.isGameobjectLooTemplateUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-spawn'">
                        {{ 'SIDEBAR.GAME_OBJECT.SPAWN' | translate }}
                        @if (gameobjectHandlerService.isGameobjectSpawnUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-spawn-addon'">
                        {{ 'SIDEBAR.GAME_OBJECT.SPAWN_ADDON' | translate }}
                        @if (gameobjectHandlerService.isGameobjectSpawnAddonUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/sai-gameobject'">
                        {{ 'SIDEBAR.GAME_OBJECT.SMART_AI' | translate }}
                        @if (gameobjectHandlerService.isGameobjectSaiUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                  }
                }
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['item'] === 'down'">
            <a (click)="toggleState('item')">
              <i class="fa fa-gavel"></i>
              <span [translate]="'SIDEBAR.ITEM.TITLE'"></span>
            </a>
            <div class="sidebar-submenu" [@slide]="menuStates['item']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'item/select'">
                    {{ 'SIDEBAR.ITEM.SELECT_ITEM' | translate }}
                  </a>
                </li>
                @if (itemHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'item/item-template'">
                      {{ 'SIDEBAR.ITEM.ITEM_TEMPLATE' | translate }}
                      @if (itemHandlerService.isItemTemplateUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                  @if (!itemHandlerService.isNew) {
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'item/item-enchantment-template'">
                        {{ 'SIDEBAR.ITEM.ENCHANTMENT_TEMPLATE' | translate }}
                        @if (itemHandlerService.isItemEnchantmentUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'item/item-loot-template'">
                        {{ 'SIDEBAR.ITEM.ITEM_LOOT' | translate }}
                        @if (itemHandlerService.isItemLootTemplateUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'item/disenchant-loot-template'">
                        {{ 'SIDEBAR.ITEM.DISENCHANT_LOOT' | translate }}
                        @if (itemHandlerService.isDisenchantmentLootTemplateUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'item/prospecting-loot-template'">
                        {{ 'SIDEBAR.ITEM.PROSPECTING_LOOT' | translate }}
                        @if (itemHandlerService.isProspectingLootTemplateUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'item/milling-loot-template'">
                        {{ 'SIDEBAR.ITEM.MILLING_LOOT' | translate }}
                        @if (itemHandlerService.isMillingLootTemplateUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                  }
                }
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['otherLoot'] === 'down'">
            <a (click)="toggleState('otherLoot')">
              <i class="fa fa-coins"></i>
              <span [translate]="'SIDEBAR.OTHER_LOOTS.TITLE'"></span>
            </a>
            <div class="sidebar-submenu" [@slide]="menuStates['otherLoot']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/select-reference'">
                    {{ 'SIDEBAR.OTHER_LOOTS.SELECT_REFERENCE_LOOT' | translate }}
                  </a>
                </li>
                @if (referenceLootHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'other-loots/reference'">
                      {{ 'SIDEBAR.OTHER_LOOTS.REFERENCE_LOOT_TEMPLATE' | translate }}
                      @if (referenceLootHandlerService.isUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
                <hr />
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/select-spell'">
                    {{ 'SIDEBAR.OTHER_LOOTS.SELECT_SPELL_LOOT' | translate }}
                  </a>
                </li>
                @if (spellLootHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'other-loots/spell'">
                      {{ 'SIDEBAR.OTHER_LOOTS.SPELL_LOOT_TEMPLATE' | translate }}
                      @if (spellLootHandlerService.isUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
                <hr />
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/select-fishing'">
                    {{ 'SIDEBAR.OTHER_LOOTS.SELECT_FISHING_LOOT' | translate }}
                  </a>
                </li>
                @if (fishingLootHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'other-loots/fishing'">
                      {{ 'SIDEBAR.OTHER_LOOTS.FISHING_LOOT_TEMPLATE' | translate }}
                      @if (fishingLootHandlerService.isUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
                <hr />
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/select-mail'">
                    {{ 'SIDEBAR.OTHER_LOOTS.SELECT_MAIL_LOOT' | translate }}
                  </a>
                </li>
                @if (mailLootHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'other-loots/mail'">
                      {{ 'SIDEBAR.OTHER_LOOTS.MAIL_LOOT_TEMPLATE' | translate }}
                      @if (mailLootHandlerService.isUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['texts'] === 'down'">
            <a (click)="toggleState('texts')">
              <i class="fa fa-font"></i>
              <span [translate]="'SIDEBAR.TEXTS.TITLE'"></span>
            </a>
            <div class="sidebar-submenu" [@slide]="menuStates['texts']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'texts/select-acore-string'">
                    {{ 'SIDEBAR.TEXTS.SELECT_ACORE_STRING_TEXT' | translate }}
                  </a>
                </li>
                @if (acoreStringHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'texts/acore-string'">
                      {{ 'SIDEBAR.TEXTS.ACORE_STRING_TEXT' | translate }}
                      @if (acoreStringHandlerService.isUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
                <hr />
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'texts/select-broadcast-text'">
                    {{ 'SIDEBAR.TEXTS.SELECT_BROADCAST_TEXT' | translate }}
                  </a>
                </li>
                @if (broadcastTextHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'texts/broadcast-text'">
                      {{ 'SIDEBAR.TEXTS.BROADCAST_TEXT' | translate }}
                      @if (broadcastTextHandlerService.isUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
                <hr />
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'texts/select-npc-text'">
                    {{ 'SIDEBAR.TEXTS.SELECT_NPC_TEXT' | translate }}
                  </a>
                </li>
                @if (npcTextHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'texts/npc-text'">
                      {{ 'SIDEBAR.TEXTS.NPC_TEXT' | translate }}
                      @if (npcTextHandlerService.isUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
                <hr />
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'texts/select-page-text'">
                    {{ 'SIDEBAR.TEXTS.SELECT_PAGE_TEXT' | translate }}
                  </a>
                </li>
                @if (pageTextHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'texts/page-text'">
                      {{ 'SIDEBAR.TEXTS.PAGE_TEXT' | translate }}
                      @if (pageTextHandlerService.isUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['gossip'] === 'down'">
            <a (click)="toggleState('gossip')">
              <i class="fa fa-comments"></i>
              <span [translate]="'SIDEBAR.GOSSIP.TITLE'"></span>
            </a>
            <div class="sidebar-submenu" [@slide]="menuStates['gossip']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'gossip/select'">
                    {{ 'SIDEBAR.GOSSIP.SELECT_GOSSIP_MENU' | translate }}
                  </a>
                </li>
                @if (gossipHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'gossip/gossip-menu'">
                      {{ 'SIDEBAR.GOSSIP.GOSSIP_MENU' | translate }}
                      @if (gossipHandlerService.isGossipMenuTableUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                  @if (!gossipHandlerService.isNew) {
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gossip/gossip-menu-option'">
                        {{ 'SIDEBAR.GOSSIP.GOSSIP_MENU_OPTION' | translate }}
                        @if (gossipHandlerService.isGossipMenuOptionTableUnsaved()) {
                          <keira-unsaved-icon />
                        }
                      </a>
                    </li>
                  }
                }
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['conditions'] === 'down'">
            <a (click)="toggleState('conditions')">
              <i class="fas fa-sort-amount-up"></i>
              <span [translate]="'SIDEBAR.CONDITIONS.TITLE'"></span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates['conditions']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'conditions/select'">
                    {{ 'SIDEBAR.CONDITIONS.SELECT_CONDITIONS' | translate }}
                  </a>
                </li>
                @if (conditionsHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'conditions/conditions'">
                      {{ 'SIDEBAR.CONDITIONS.CONDITIONS' | translate }}
                      @if (conditionsHandlerService.isConditionsUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['smartAi'] === 'down'">
            <a (click)="toggleState('smartAi')">
              <i class="fa fa-lightbulb"></i>
              <span [translate]="'SIDEBAR.SMARTAI.TITLE'"></span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates['smartAi']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'smart-ai/search-existing'">
                    {{ 'SIDEBAR.SMARTAI.SEARCH_BY_SAI' | translate }}
                  </a>
                </li>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'smart-ai/search-entity'">
                    {{ 'SIDEBAR.SMARTAI.SEARCH_BY_ENTITY' | translate }}
                  </a>
                </li>
                @if (saiHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'smart-ai/editors'">
                      {{ 'SIDEBAR.SMARTAI.EDITOR' | translate }}
                      @if (saiHandlerService.isSaiUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['spell'] === 'down'">
            <a (click)="toggleState('spell')">
              <i class="fa fa-magic"></i>
              <span [translate]="'SIDEBAR.SPELL_DBC_OVERRIDES.TITLE'"></span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates['spell']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'spell/select'">
                    {{ 'SIDEBAR.SPELL_DBC_OVERRIDES.SEARCH_SPELL' | translate }}
                  </a>
                </li>
                @if (spellHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'spell/spell-dbc'">
                      {{ 'SIDEBAR.SPELL_DBC_OVERRIDES.SPELL_DBC_EDITOR' | translate }}
                      @if (spellHandlerService.isSpellDbcUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [class.active]="menuStates['gameTele'] === 'down'">
            <a (click)="toggleState('gameTele')">
              <i class="fa fa-atom"></i>
              <span [translate]="'SIDEBAR.GAME_TELE.TITLE'"></span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates['gameTele']">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'game-tele/select'">
                    {{ 'SIDEBAR.GAME_TELE.SEARCH_GAME_TELE' | translate }}
                  </a>
                </li>
                @if (gameTeleHandlerService.selected) {
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'game-tele/tele'">
                      {{ 'SIDEBAR.GAME_TELE.SELECT_GAME_TELE' | translate }}
                      @if (gameTeleHandlerService.isGameTeleUnsaved()) {
                        <keira-unsaved-icon />
                      }
                    </a>
                  </li>
                }
              </ul>
            </div>
          </li>

          <li>
            <a id="unused-guid-search" href="#" [routerLink]="'unused-guid-search'">
              <i class="fa fa-search"></i> {{ 'SIDEBAR.UNUSED_GUID_SEARCH' | translate }}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <button class="btn btn-secondary btn-sm sidebar-button" (click)="toggleSidebar()">
    <i class="fas {{ getSideBarState() ? 'fa-angle-double-right' : 'fa-angle-double-left' }}"></i>
  </button>
</nav>
